import React, { Component } from 'react';
import { Card, Form, DatePicker, Input, Button, message } from 'antd';
import moment from 'moment';
import qs from 'qs';
import { getBusDetail, addEditBus } from 'Services/hu.js';
import { get } from 'lodash';

const FormItem = Form.Item;

@Form.create()
export default class busDetail extends Component {
  constructor(props) {
    super(props);
    window.scope = this;
  }

  state = {
    list: {},
  };

  componentDidMount() {
    this.getBusData();
  }

  getBusData = async () => {
    const { type, id } = this;
    if (type === 'add') return false;
    const { setFieldsValue } = this.props.form;
    const res = await getBusDetail({ id });
    this.setState({ list: res.data });
    const { editor, inputor, total, ...obj } = res.data;

    obj.createTime = moment(obj.createTime);
    if (type === 'edit') setFieldsValue(obj);
  };

  id = qs.parse(this.props.location.search.substr(1)).id;

  type = this.props.match.params.type;

  handleSubmit = e => {
    e.preventDefault();
    const { validateFields } = this.props.form;
    validateFields((err, value) => {
      if (err) return false;
      const data = {
        ...value,
        createTime: value.createTime.format('YYYY-MM-DD'),
      };
      if (this.type === 'edit') data.id = this.id;
      addEditBus(data).then(res => {
        if (+get(res, 'code') === 0) this.props.history.replace('/publicTransport/bus');
        else message.error(get(res, 'msg') || '提交失败！');
      });
    });
  };

  columns = [
    {
      title: '检查日期',
      key: 'date',
      dataIndex: '',
    },
  ];

  render() {
    const { type } = this;
    const title = type === 'add' ? '新增车辆' : `车辆详情(${type === 'edit' ? '编辑' : '查看'})`;
    const isView = type === 'view';
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const { list } = this.state;

    return (
      <div>
        <Card title={title}>
          <Form onSubmit={this.handleSubmit} style={{ maxWidth: '500px' }}>
            <FormItem label="车牌号" {...formItemLayout}>
              {!isView ? (
                getFieldDecorator('num', {
                  rules: [{ required: true, message: '请输入车牌号！' }],
                })(<Input placeholder="请输入车牌号" />)
              ) : (
                <span>{list.num}</span>
              )}
            </FormItem>

            <FormItem label="车辆型号" {...formItemLayout}>
              {!isView ? (
                getFieldDecorator('model', {
                  rules: [{ required: true, message: '请输入车牌号！' }],
                })(<Input placeholder="请输入车牌号" />)
              ) : (
                <span>{list.model}</span>
              )}
            </FormItem>

            <FormItem label="车辆类型" {...formItemLayout}>
              {!isView ? (
                getFieldDecorator('type', {
                  rules: [{ required: true, message: '请输入车辆类型！' }],
                })(<Input placeholder="请输入车辆类型" />)
              ) : (
                <span>{list.type}</span>
              )}
            </FormItem>

            <FormItem label="提车日期" {...formItemLayout}>
              {!isView ? (
                getFieldDecorator('createTime', {
                  rules: [{ required: true, message: '请输入提车日期！' }],
                })(<DatePicker placeholder="请输入提车日期" />)
              ) : (
                <span>{list.createTime}</span>
              )}
            </FormItem>

            {!isView && (
              <FormItem wrapperCol={{ offset: 8 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </FormItem>
            )}
          </Form>
        </Card>
      </div>
    );
  }
}
